<template>
	<div class="cumulative-section">
		<!-- 加载状态 -->
		<div v-if="loading" class="loading-overlay">
			<el-skeleton :rows="1" animated />
		</div>
		
		<!-- 错误状态 -->
		<div v-else-if="error" class="error-overlay">
			<el-alert
				title="数据加载失败"
				type="error"
				:closable="false"
				show-icon
			>
				<template #default>
					<div>延期统计数据加载失败，请重试</div>
				</template>
				<template #action>
					<el-button type="primary" size="small" @click="handleRetry">
						重试
					</el-button>
				</template>
			</el-alert>
		</div>
		
		<!-- 正常数据显示 -->
		<el-row v-else :gutter="20">
			<el-col :span="6">
				<div class="stat-card all-plan-card">
					<div class="stat-content">
						<div class="stat-icon">
							<el-icon><ele-Calendar /></el-icon>
						</div>
						<div class="stat-info">
							<div class="stat-number">{{ delayCounts.allPlanCount }}</div>
							<div class="stat-label">总计划数</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="stat-card all-actual-card">
					<div class="stat-content">
						<div class="stat-icon">
							<el-icon><ele-VideoPlay /></el-icon>
						</div>
						<div class="stat-info">
							<div class="stat-number">{{ delayCounts.allActualCount }}</div>
							<div class="stat-label">总实际数</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="stat-card delay-plan-card">
					<div class="stat-content">
						<div class="stat-icon">
							<el-icon><ele-Warning /></el-icon>
						</div>
						<div class="stat-info">
							<div class="stat-number">{{ delayCounts.delayPlanCount }}</div>
							<div class="stat-label">延期计划数</div>
						</div>
						<div class="stat-chart">
							<DelayRateChart :rate="delayCounts.delayPlanRate" />
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="stat-card delay-actual-card">
					<div class="stat-content">
						<div class="stat-icon">
							<el-icon><ele-CircleClose /></el-icon>
						</div>
						<div class="stat-info">
							<div class="stat-number">{{ delayCounts.delayActualCount }}</div>
							<div class="stat-label">延期实际数</div>
						</div>
						<div class="stat-chart">
							<DelayRateChart :rate="delayCounts.delayActualRate" />
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
import DelayRateChart from './DelayRateChart.vue';

interface DelayCounts {
	allPlanCount: number;
	allActualCount: number;
	delayPlanCount: number;
	delayActualCount: number;
	delayPlanRate: number;
	delayActualRate: number;
}

interface Props {
	delayCounts: DelayCounts;
	loading?: boolean;
	error?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
	loading: false,
	error: false
});

const emit = defineEmits<{
	retry: [];
}>();

const handleRetry = () => {
	emit('retry');
};
</script>

<style lang="scss" scoped>
.cumulative-section {
	margin-bottom: 10px;
	position: relative;
	
	.loading-overlay {
		padding: 20px;
		background: var(--el-bg-color);
		border: 1px solid var(--el-border-color-light);
		border-radius: 12px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	
	.error-overlay {
		padding: 20px;
	}

	.stat-card {
		padding: 20px;
		height: 120px;
		background: var(--el-bg-color);
		border: 1px solid var(--el-border-color-light);
		border-radius: 12px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4px;
			background: linear-gradient(90deg, var(--el-color-primary), var(--el-color-success));
		}

		&:hover {
			box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
			transform: translateY(-3px);
		}

		.stat-content {
			display: flex;
			align-items: center;
			height: 100%;
			gap: 15px;

			.stat-icon {
				width: 50px;
				height: 50px;
				border-radius: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24px;
				color: white;
				flex-shrink: 0;
			}

			.stat-info {
				flex: 1;
				text-align: left;

				.stat-number {
					font-size: 28px;
					font-weight: bold;
					color: var(--el-text-color-primary);
					margin-bottom: 4px;
					line-height: 1;
				}

				.stat-label {
					font-size: 14px;
					color: var(--el-text-color-regular);
				}
			}

			.stat-chart {
				width: 60px;
				height: 60px;
				flex-shrink: 0;
			}
		}

		// 不同卡片的颜色主题
		&.all-plan-card {
			.stat-icon {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			}
		}

		&.all-actual-card {
			.stat-icon {
				background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
			}
		}

		&.delay-plan-card {
			.stat-icon {
				background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
			}
		}

		&.delay-actual-card {
			.stat-icon {
				background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
			}
		}
	}
}

// 响应式设计
@media (max-width: 768px) {
	.cumulative-section {
		padding-top: 15px;
		margin-bottom: 15px;

		.stat-card {
			padding: 15px;
			height: 100px;
			margin-bottom: 15px;

			.stat-content {
				gap: 12px;

				.stat-icon {
					width: 40px;
					height: 40px;
					font-size: 20px;
				}

				.stat-info {
					.stat-number {
						font-size: 24px;
					}

					.stat-label {
						font-size: 13px;
					}
				}

				.stat-chart {
					width: 50px;
					height: 50px;
				}
			}
		}
	}
}
</style>